<template>
  <v-chart :options="orgOption" autoresize />
</template>

<script>
export default {
  name: "MonitorPie",
  props: {
    title: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      datas: [
        {
          value: 30,
          name: "未处理",
          itemStyle: {
            color: "#0286ff"
          }
        },
        {
          value: 100,
          name: "已处理",
          itemStyle: {
            color: "#FB5274"
          }
        }
      ],
      imgUrl:
        "",
      orgOption: {}
    };
  },
  computed: {},
  methods: {
    refresh: function() {}
  },
  mounted: function() {
    this.orgOption = {
      graphic: {
        elements: [
          {
            type: "image",
            style: {
              image: this.imgUrl,
              width: "25",
              height: "25"
            },
            left: "center",
            top: "30%"
          }
        ]
      },
      title: {
        text: this.title,
        left: "center",
        top: "32%",
        padding: [24, 0],
        textStyle: {
          color: "#fff",
          fontSize: "60%",
          align: "center"
        }
      },
      legend: {
        orient: "vertical",
        width: "100%",
        left: "center",
        textStyle: {
          color: "#fff",
          fontSize: 16
        },
        icon: "circle",
        right: "0",
        bottom: "0",
        padding: [30, 60],
        itemGap: 10
      },
      tooltip: {
        show: true,
        backgroundColor: "rgba(255,255,255,0.1)"
      },
      series: [
        {
          type: "pie",
          radius: ["70%", "80%"],
          center: ["50%", "40%"],
          hoverAnimation: true,
          z: 10,
          data: this.datas,
          labelLine: {
            show: false
          },
          label: {
            show: false
          }
        },
        {
          type: "pie",
          radius: ["60%", "70%"],
          center: ["50%", "40%"],
          hoverAnimation: false,
          label: {
            show: false
          },
          itemStyle: {
            opacity: 0.4
          },
          data: this.datas,
          labelLine: {
            show: false
          }
        },
        {
          type: "pie",
          radius: ["50%", "60%"],
          center: ["50%", "40%"],
          hoverAnimation: false,
          label: {
            show: false
          },
          itemStyle: {
            opacity: 0.1
          },
          data: this.datas,
          labelLine: {
            show: false
          }
        }
      ]
    };
  }
};
</script>

<style scoped>
.echarts {
  height: 230px !important;
}
</style>
